import React, { useState } from 'react';
import './home.css'


// 定义表单数据类型
type FormData = {
  mobile: string;
  code: string;
};

// 定义错误信息类型
type ErrorMessages = {
  mobile: string;
  code: string;
};

export default function Home() {
 // 表单数据状态
 const [formData, setFormData] = useState<FormData>({ mobile: '', code: '' });
 // 错误信息状态
 const [errorMessages, setErrorMessages] = useState<ErrorMessages>({ mobile: '', code: '' });
 // 提交状态
 const [isSubmitting, setIsSubmitting] = useState(false);

 // 手机号格式校验正则表达式
 const mobileRegex = /^1[3-9]\d{9}$/;
 // 验证码格式校验正则表达式
 const codeRegex = /^\d{6}$/;

 // 处理输入变化
 const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
   const { name, value } = e.target;
   setFormData((prevData) => ({ ...prevData, [name]: value }));
   // 清除当前输入的错误信息
   setErrorMessages((prevErrors) => ({ ...prevErrors, [name]: '' }));
 };
  
  
  // 校验手机号
  const validateMobile = () => {
    const { mobile } = formData;
    if (mobile === '') {
      setErrorMessages((prevErrors) => ({ ...prevErrors, mobile: '请输入手机号' }));
      return false;
    } else if (!mobileRegex.test(mobile)) {
      setErrorMessages((prevErrors) => ({ ...prevErrors, mobile: '手机号格式错误' }));
      return false;
    }
    return true;
  };

  // 校验验证码
  const validateCode = () => {
    const { code } = formData;
    if (code === '') {
      setErrorMessages((prevErrors) => ({ ...prevErrors, code: '请输入验证码' }));
      return false;
    } else if (!codeRegex.test(code)) {
      setErrorMessages((prevErrors) => ({ ...prevErrors, code: '验证码格式错误' }));
      return false;
    }
    return true;
  };

  // 校验表单
  const validateForm = () => {
    const isMobileValid = validateMobile();
    const isCodeValid = validateCode();
    return isMobileValid && isCodeValid;
  };
  

  // 处理表单提交
  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    if (validateForm()) {
      setIsSubmitting(true);
      try {
        // 模拟接口请求
        await new Promise((resolve) => setTimeout(resolve, 1000));
        console.log('表单数据:', formData);
      } finally {
        setIsSubmitting(false);
      }
    }
  };

  // 获取验证码按钮是否可用
  const canGetCode = validateMobile();

  return (
    <form onSubmit={handleSubmit}>
    <div className="form-item">
      <input
        placeholder="手机号"
        name="mobile"
        value={formData.mobile}
        onChange={handleInputChange}
      />
      {errorMessages.mobile && (
        <p className="form-error">{errorMessages.mobile}</p>
      )}
    </div>

    <div className="form-item">
      <div className="input-group">
        <input
          placeholder="验证码"
          name="code"
          value={formData.code}
          onChange={handleInputChange}
        />
        <button className="getcode" disabled={!canGetCode}>
          获取验证码
        </button>
      </div>
      {errorMessages.code && (
        <p className="form-error">{errorMessages.code}</p>
      )}
    </div>

    <button className="submit-btn" type="submit" disabled={isSubmitting}>
      {isSubmitting ? 'submiting......' : '登录'}
    </button>
  </form>
  );
}
